<template>
	<view class="container flex_C">
		<u-navbar leftIcon="" title="首页" fixed bgColor="#fff" placeholder></u-navbar>
		<view class="flex_1">
			<z-paging ref="paging" refresher-only @onRefresh="onRefresh" height="100%" :fixed="false">
				<view class="banner_wrap">
					<swiper class="swiper" circular :autoplay="true" v-if="carouselLoad">
						<swiper-item v-for="(item,index) in carousel" :key="index">
							<view class="swiper-item" @click="swiperClick(item)">
								<image class="bg" :src="item.imageUrl" mode="aspectFit"></image>
							</view>
						</swiper-item>
					</swiper>
					<!-- <u-skeleton loading style="width: 100%;height: 252rpx;"></u-skeleton> -->
					<Skeleton h='252' r="10" v-else />
				</view>
				<view class="quick_access_wrap flexV_sb">
					<!-- <navigator class="item flexV" url="/pages/common/customerService">
						<image class="icon" src="/static/home/icon_1.png" mode=""></image>
						<text class="text">客服</text>
					</navigator> -->
					<view class="item flexV" @click="customerService">
						<image class="icon" src="/static/home/icon_1.png" mode=""></image>
						<text class="text">客服</text>
					</view>
					<view class="item flexV" @click="notification">
						<image class="icon" src="/static/home/icon_2.png" mode=""></image>
						<text class="text">通知</text>
						<view class="dot" v-if="newMsg"></view>
					</view>
				</view>
				<view class="evaluate_wrap" @click="toEvaluate">
					<image class="bg" src="/static/home/img_1.png" mode="widthFix"></image>
				</view>
				<view class="tactics_list_wrap">
					<view class="title">优质策略</view>
					<view class="list_wrap">
						<view class="item" v-for="(item,index) in strategies" @click="toDetails(item)" :key="item.id">
							<view class="top_box flexV">
								<view class="logo_box">
									<image class="icon" :src="item.iconUrl" mode="aspectFill"></image>
								</view>
								<text class="name">{{item.name}}</text>
							</view>
							<view class="bottom_box flexV">
								<view class="">
									<view class="percent" v-if="item.return90Days<0" style="color: #F04848;">
										{{item.return90Days}}%
									</view>
									<view class="percent" v-else>+{{item.return90Days}}%</view>
									<view class="label">90天收益率</view>
								</view>
								<view class="earnings">
									<view class="percent" style="color: #26282B;">{{item.maxDrawdown}}%</view>
									<view class="label">最大回撤值</view>
								</view>
								<view :class="[!item.isPurchaseAllowed?'disabled':'']" class="btn flexHV">购买</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bitcoin_wrap" v-for="(item,index) in currencies" :key="index">
					<view class="title flexV">
						<image class="icon" :src="item.iconUrl" mode="aspectFill"></image>
						<text class="text">{{item.name}}</text>
					</view>
					<FeChart :option="item.option" :idName="'bitcoin_chart_'+index" height="128rpx"></FeChart>
				</view>
				<template v-if="!dynamicLoad">
					<view class="" style="padding: 0 32rpx;">
						<Skeleton h='170' r="10" mt="24" />
						<Skeleton h='170' r="10" mt="24" />
						<Skeleton h='232' r="10" mt="40" />
					</view>
				</template>
			</z-paging>
		</view>
	</view>
</template>

<script>
	import {
		carouselApi,
		dynamicInfoApi
	} from '@/api/home.js';
	import FeChart from '@/components/FeChart/index.vue'
	import Skeleton from '@/components/skeleton/index.vue';
	const navHeight = uni.upx2px(88) + uni.getSystemInfoSync().statusBarHeight
	export default {
		components: {
			FeChart,
			Skeleton
		},
		data() {
			return {
				navHeight,
				carousel: [],
				carouselLoad: false,
				strategies: [],
				dynamicInfo: {},
				dynamicLoad: false,
				option: {},
				currencies: [],
				isLogin: false,
				isEvaluate: false,
				newMsg: false
			}
		},
		onShow() {
		},
		onLoad() {
			this.getCarousel();
			this.getDynamicInfo();
		},
		methods: {
			onRefresh() {
				// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				Promise.all([this.getCarousel(), this.getDynamicInfo()]).then(res => {
					this.$refs.paging.complete();
				})
			},
			async getCarousel() {
				const res = await carouselApi();
				if (res.code === 200) {
					this.carouselLoad = true
					this.carousel = res.data.carousel
				}
			},
			async getDynamicInfo() {
				const res = await dynamicInfoApi();
				if (res.code === 200) {
					this.dynamicLoad = true
					this.newMsg = res.data.newMsg
					this.strategies = res.data.strategies;
					this.currencies = res.data.currencies.map(it => {
						const source = it.returns.reverse();
						const xAxisData = source.map(item => item.date)
						const data = source.map(item => item.returnRate)
						return {
							...it,
							option: {
								grid: {
									top: 0,
									left: 0,
									bottom: 0,
									right: 0
								},
								xAxis: {
									type: 'category',
									boundaryGap: false,
									data: xAxisData,
									axisLine: {
										show: false
									},
									axisLabel: {
										show: false
									},
									axisTick: {
										show: false
									},
									splitLine: {
										show: false
									}
								},
								yAxis: {
									type: 'value',
									splitLine: {
										show: false
									}
								},
								series: [{
									data: data,
									type: 'line',
									symbol: 'none',
									smooth: true,
									lineStyle: {
										color: '#06B070',
										width: 1
									},
									areaStyle: {
										color: {
											type: 'linear',
											x: 0,
											y: 0,
											x2: 0,
											y2: 1,
											colorStops: [ // 渐变颜色
												{
													offset: 0,
													color: 'rgba(6, 176, 112, 0.27)',
												},
												{
													offset: 1,
													color: 'rgba(6, 176, 112, 0)',
												},
											],
											global: false,
										},
									},
								}]
							}
						}
					})
				}
			},
			customerService() {
				// if (!getApp().verifyIsLogin()) return;
				uni.navigateTo({
					url: "/pages/common/customerService"
				})
			},
			toEvaluate() {
				if (!getApp().verifyIsLogin()) return;
				uni.navigateTo({
					url: '/pages/common/riskAnswer'
				})
			},
			toDetails(item) {
				const {
					isPurchaseAllowed,
					id
				} = item
				if (isPurchaseAllowed) {
					if (!getApp().verifyIsLogin()) return
					const {
						riskInfo
					} = uni.getStorageSync('userInfo');
					if (this.isEmpty(riskInfo) || !riskInfo.completed) {
						uni.showModal({
							title: '温馨提示',
							content: '您还没完成风险评估。',
							cancelText: '再看看',
							confirmText: '去评估',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/common/riskAnswer'
									})
								}
							}
						})
						return;
					}

					uni.navigateTo({
						url: "/pages/tacticsDetails/tacticsDetails?id=" + id
					})
				}
			},
			notification() {
				if (!getApp().verifyIsLogin()) return
				uni.navigateTo({
					url: '/pages/common/notification'
				})
			},
			swiperClick(item) {
				const {
					linkUrl
				} = item;
				const isWeb = linkUrl.indexOf('http') > -1 || linkUrl.indexOf('https') > -1
				uni.navigateTo({
					url: isWeb ? '/pages/common/webView?src=' + item.linkUrl : linkUrl
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		/* #ifdef H5 */
		height: calc(100vh - 50px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
	}

	.flex_1 {
		height: 0;
	}

	.banner_wrap {
		padding: 24rpx 32rpx;
		padding-bottom: 0;

		.swiper {
			height: 252rpx;
		}

		.swiper-item {
			display: block;
			height: 252rpx;
			border-radius: 12rpx;
			overflow: hidden;
			background-color: #F5F7F8;

			.bg {
				width: 100%;
				height: 100%;
			}
		}
	}

	.quick_access_wrap {
		padding: 0 32rpx;
		margin: 24rpx 0;

		.item {
			width: 330rpx;
			height: 88rpx;
			border-radius: 12rpx;
			border: 1px solid #DBE0E6;
			padding: 0 24rpx;

			.icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}

			.text {
				font-weight: 400;
				font-size: 28rpx;
				color: #26282B;
			}

			.dot {
				width: 18rpx;
				height: 18rpx;
				background: #F04848;
				border-radius: 0rpx;
				margin-left: auto;
				border-radius: 50%;
			}
		}
	}

	.evaluate_wrap {
		padding: 0 32rpx;

		.bg {
			width: 100%;
			height: auto;
		}
	}

	.tactics_list_wrap {
		padding: 0 32rpx;
		margin-top: 40rpx;

		.title {
			font-weight: 600;
			font-size: 34rpx;
			color: #26282B;
		}

		.list_wrap {
			.item {
				height: 184rpx;
				padding-top: 26rpx;

				.top_box {
					margin-bottom: 22rpx;

					.logo_box {
						width: 36rpx;
						height: 36rpx;
						background: #343434;
						border-radius: 18rpx;
						overflow: hidden;

						.icon {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						font-weight: 400;
						font-size: 28rpx;
						color: #26282B;
						margin-left: 16rpx;
					}
				}

				.bottom_box {
					.percent {
						font-size: 36rpx;
						color: #06B070;
					}

					.label {
						font-weight: 400;
						font-size: 22rpx;
						color: #A6ACB4;
					}

					.earnings {
						margin: 0 auto 0 100rpx;
					}

					.btn {
						width: 140rpx;
						height: 64rpx;
						background: #FBD536;
						border-radius: 8rpx;
						font-weight: 600;
						font-size: 26rpx;
						color: #26282B;

						&.disabled {
							background-color: #D2D9E1;
							color: #A6ACB4;
						}
					}
				}
			}
		}
	}

	.bitcoin_wrap {
		margin: 40rpx 32rpx;
		margin-top: 40rpx;
		padding: 24rpx;
		height: 232rpx;
		background: #F1F9F7;
		border-radius: 12rpx;

		.title {
			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 12rpx;
				border-radius: 50%;
			}

			.text {
				font-weight: 400;
				font-size: 26rpx;
				color: #26282B;
			}
		}
	}
</style>